<template>
    <div class="container">
        <top-nav>开心娱乐</top-nav>
        <div class="banner">
            <img src="http://file.rzkeji.com/web/recruit/advent/banner_happy.jpg"/>
        </div>
        <div class="happyList">
            <!-- <div class="happyList_child">
                <div>
                    <img src="http://file.rzkeji.com/web/zhaowoa/upload/2018/10/20/c9c914347e11526d06f643cb345b11a3.jpg"/>
                </div>
                <div class="tit">haha</div>
            </div>
            <div class="happyList_child">
                <div>
                    <img src="http://file.rzkeji.com/web/zhaowoa/upload/2018/10/20/c9c914347e11526d06f643cb345b11a3.jpg"/>
                </div>
                <div class="tit">haha</div>
            </div>
            <div class="happyList_child">
                <div>
                    <img src="http://file.rzkeji.com/web/zhaowoa/upload/2018/10/20/c9c914347e11526d06f643cb345b11a3.jpg"/>
                </div>
                <div class="tit">haha</div>
            </div> -->
            <div class="happyList_child" v-for="(item,index) of happyData" :key="index" @click="toHappy(item.link_url)">
                <div>
                    <img :src="item.img_url"/>
                </div>
                <div class="tit">{{item.title}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import topNav from '@/components/topNav'
    export default{
        name:'entertainment',
        data(){
            return{
                happyData:''
            }
        },
        components:{
            topNav
        },
        methods:{
            async getHappy(){
                 let res=await this.$axios('/other/get-joy-info-list')
                 if(res.data.level=='success'){
                     this.happyData=res.data.data
                 }
            },
            toHappy(url){
                window.location.href=url
            }
        },
        activated(){
            this.getHappy()
        }
           
    }
</script>
<style scoped>
    .container{
        width: 100vw;
        height: 100vh;
        background: #eee;
    }
    .banner{
        margin-top:45px;
    }
    .banner>img{
        width: 100%;
      height: 170px;
    }
    .happyList{
        background: #fff;
        margin-top:10px;
        display: flex;
        flex-wrap: wrap;
        /* box-shadow: 0px 0px 3px 3px #eee; */
    }
    .happyList_child{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        height: 150px;
        width: 33%;
        border-bottom: 1px solid #eee;
    }
    .happyList_child>div{
        width: 100%;
        text-align: center;
    }
    .tit{
        white-space:nowrap; 
        overflow:hidden; 
        text-overflow:ellipsis;
    }
    .happyList_child>div>img{
        height: 50px;
        width: 50px;
        border-radius: 10px;
    }
    .happyList_child{
        border-right:1px solid #eee;
    }
</style>
